<template>
	<transition name="payment-page">
		<div id="payment-page" v-show="show_page">
			<transition name="payment-container">
				<div class="container" v-show="show_page">
					<div class="payment-page-header">
						<b-icon-x class="close-btn" @click="close" />
					</div>
					<div class="payment-page-content">
						<p class="payment-page-select-type-tips">请选择支付方式</p>
						<div class="payment-page-select-type-list">
							<div :class="'payment-page-select-type-item ' + (payment_type == 'wechat' ? 'payment-page-select-type-item-selected' : '')" @click="change_pay_type('wechat')">
								<img src="/images/wechat.png" />
							</div>
							<div :class="'payment-page-select-type-item ' + (payment_type == 'alipay' ? 'payment-page-select-type-item-selected' : '')" @click="change_pay_type('alipay')">
								<img src="/images/alipay.png" />
							</div>
						</div>
						<div class="payment-page-foot">
							<b-button variant="primary" class="payment-page-pay-btn" ref="pay_btn" @click="payment">
								<b-spinner v-if="loading" small label="Payment"></b-spinner>
								<div v-else>
									确 认 付 款
								</div>
							</b-button>
						</div>
					</div>
				</div>
			</transition>
		</div>
	</transition>
</template>

<script>
	import {BIcon, BIconX } from 'bootstrap-vue'
	import layer from 'layui-layer'
	
	export default {
		components: {
			BIcon,
			BIconX
		},
		data() {
			return {
				show_page: false,
				display: false,
				payment_type: 'wechat',
				loading: false
			};
		},
		props: {
			show: false,
			id: null,
			completed: false
		},
		methods: {
			page_display() {
				this.display = !this.display;
			},
			close() {
				this.$emit('update:id', null)
				this.$emit('update:show', false)
			},
			order_completed() {
				this.$emit('update:completed', true)
			},
			change_pay_type(type){
				this.payment_type = type
			},
			payment() {
				if(!this.loading) {
					this.loading = !this.loading
					this.$axios.post('/order/payment', {id: this.id, pay_type: this.payment_type}).then(resp => {
						if(resp.ret == 0) {
							this.order_completed()
							this.$msg('支付成功')
							this.close()
						}
						
						this.loading = !this.loading
					})
				}
			}
		},
		mounted() {
			this.show_page = this.show;
		},
		watch: {
			show(newVal, oldVal){
				this.show_page = newVal;
				this.display = this.show;
			}
		}
	}
</script>

<style>
	#payment-page {
		z-index: 2147483647;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
	}
	#payment-page .container {
		margin-top: 3vh;
		padding: 10px;
		height: 97vh;
		background-color: #fff;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}
	
	.payment-page-enter-active, .payment-page-leave-active {
		transition: all .3s ease;
	}
	.payment-page-enter-active {
		opacity: 1;
	}
	.payment-page-leave-to {
		opacity: 0;
	}
	
	.payment-container-enter-active, .payment-container-leave-active {
		transition: all .2s ease;
	}
	.payment-container-enter, .payment-container-leave-to {
		transform: translateY(6.25rem);
		opacity: 0;
	}
	
	.close-btn {
		float: left;
		font-size: 1.5625rem;
	}
	
	.payment-page-header {
		height: 20px;
		margin: 0.3125rem auto;
	}
	.payment-page-content {
		padding-top: 1.25rem;
	}
	.payment-page-select-type-tips {
		font-size: 1.5625rem;
	}
	
	.payment-page-select-type-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.payment-page-select-type-item {
		margin-bottom: 0.9375rem;
		border: 0.125rem solid #ddd;
		border-radius: 0.625rem;
		width: 18rem;
		text-align: center;
		cursor: pointer;
		user-select: none;
	}
	.payment-page-select-type-item-selected {
		border: 0.125rem solid #0069d9
	}
	.payment-page-select-type-item img {
		width: 9.375rem;
	}
	
	.payment-page-foot {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 1.875rem;
	}
	.payment-page-pay-btn {
		width: 100%;
		max-width: 50rem;
	}
</style>
